<template>
	<view class="all-main">
		<view class="main">
			<u-sticky>
				<view class="tops">
					<view class="search">
						<u-search placeholder="请输入银行名称" v-model="keyword" shape="square" bgColor="#ffffff"
							:showAction="false" @change="getBankList"></u-search>
					</view>
					<view class="cancel" @click="cancel">
						<text>取消</text>
					</view>
				</view>
			</u-sticky>
			<view v-if="searchList.length > 0" class="con">
				<view class="items" v-for="(item, index) in searchList" :key="index"
					@click="selects(item)">
					<text>{{item.bankName}}</text>
				</view>
			</view>
			<u-empty v-else mode="search" icon="/static/Empty/search_null.png"></u-empty>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				keyword: '',
				bankCode: '',
				code: '',
				searchList: [],
			}
		},
		onLoad(e) {
			this.type = e.type
			if (e.bankCode) {
				this.bankCode = e.bankCode
			}
			if (e.code) {
				this.code = e.code
			}
			this.getBankList()
		},
		methods: {
			// 搜索
			async getBankList() {
				uni.showLoading({
					title: '加载中'
				});
				const {
					data: res
				} = await this.$myHttp({
					url: 'v1/getBankList',
					data: {
						type: this.type,
						keyword: this.keyword,
						bankCode: this.bankCode,
						code: this.code
					}
				});
				uni.hideLoading()
				if (res.code == 200) {
					this.searchList = res.data
				}
			},
			// 选择
			selects(item) {
				if (this.type == 1) {
					uni.$emit('bankCode', item.bankCode)
					uni.$emit('bankName', item.bankName)
				} else {
					uni.$emit('bankNo', item.bankCode)
					uni.$emit('branchName', item.bankName)
				}
				uni.navigateBack({
					delta: 1
				})
			},
			// 取消
			cancel() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.all-main {
		.main {
			// padding: 20rpx;

			.tops {
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
				background-color: #F2F6FC;

				.search {
					width: 88%;
				}
			}

			.con {
				margin: 0 20rpx;
				background-color: #ffffff;
				font-size: 28rpx;

				.items {
					padding: 20rpx;
					border-bottom: 1px solid #f4f4f5;
				}
			}
		}
	}
</style>